<template>
    <div>
        <j-modal
            class="xshistory"
            title="分配专家"
            :visible="visible"
            :width="1000"
            :maskClosable="false"
            :switchFullscreen="switchFullscreen"
            @cancel="handleCancel"
            @ok="handleOk"
        >
        
            <div class="expertBox">
                <div class="" style="display:flex;align-items:center;margin-bottom:16px;">
                    <a-button type="primary" style="margin-right:24px;" @click="deleteExpert">删除</a-button>
                    <h2>已选专家</h2>
                </div>
                <a-spin :spinning="selectedSpinning">
                    <ul class="selectExpertBox">
                        <li v-for="(item, index) in selectExpertList" :key="index" :class="item.selected?'selectedExpertActive':''" @click="handelSelectExpert(index, item)"><span>{{item.zj_xm}}</span><i></i></li>
                    </ul>
                </a-spin>
                
                <div class="table-page-search-wrapper" style="margin-top:16px;">
                    <a-form layout="inline">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="姓名：">
                                    <a-input placeholder="请填写姓名" v-model="queryParam.zj_xm"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="单位：">
                                    <a-input placeholder="请填写单位" v-model="queryParam.zj_dw"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="专业类别：">
                                    <a-input placeholder="请填写专业类别" v-model="queryParam.zj_lb"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="评审角色：">
                                    <a-input placeholder="请填写评审角色" v-model="queryParam.zj_psjs"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                                    <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
                                    <a-button type="primary" icon="reload"  @click="searchReset" style="margin-left: 8px">重置</a-button>
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div class="expertList">
                    <a-spin :spinning="spinning">
                        <ol>
                            <li v-for="(item, index) in expertList" :key="index" :class="item.selected ? 'expertActive' : ''" @click="handelExpert(index, item)">
                                <span>{{item.zj_xm}}</span>
                                <p>
                                    <b>{{item.zj_sj}}</b>
                                    <b>{{item.zj_gzdw}}</b>
                                </p>
                            </li>
                        </ol>
                    </a-spin>
                </div>
            </div>
        </j-modal>
    </div>
</template>

<script>
import {
    cxjwysdFzzjdeleteBatch
} from "@/api/api"
import { getAction } from '@/api/manage';
export default {
    props: ['expertFlag','fzid'],
    data(){
        return {
            visible: false,
            switchFullscreen: true,
            queryParam: {},
            selectExpertList: [],
            expertList: [],
            expertIds: [],
            selectedIds: [],
            spinning: false,
            selectedSpinning: false
        }
    },
    watch: {
        expertFlag(next, prev) {
            if (next != prev) {
                var self = this;
                self.visible = !self.visible;
                self.waitExpertList();
                self.selectedExpertList();
            }
        }
    },
    methods: {
        handleCancel(){
            this.expertIds = [];
            this.visible = false;
            this.$parent.$parent.loadData();
            this.queryParam = {};
        },
        searchQuery(){
            if (!this.queryParam.zj_xm) {
                delete this.queryParam.zj_xm
            }
            if (!this.queryParam.zj_dw) {
                delete this.queryParam.zj_dw
            }
            if (!this.queryParam.zj_lb) {
                delete this.queryParam.zj_lb
            }
            if (!this.queryParam.zj_psjs) {
                delete this.queryParam.zj_psjs
            }
            this.waitExpertList();
        },

        searchReset() {
            this.queryParam = {}
            this.queryParam.fzid = this.fzid;
            this.waitExpertList();
        },
        deleteExpert(){
            if (this.selectedIds.length) {
                let data = {
                    ids: this.selectedIds.join(','),
                    csfzid: this.fzid
                }
                cxjwysdFzzjdeleteBatch(data).then(res=>{
                    if (res.success) {
                        this.selectedIds = [];
                        this.$message.success(res.message);
                        this.selectedExpertList();
                        this.waitExpertList();
                    }
                })
            } else {
                this.$message.warning("请选择要删除的专家！");
            }
            
        },
        // 点击已选专家
        handelSelectExpert(index, item){
            this.selectedIds = [];
            item.selected = !item.selected;
            this.selectExpertList.map(item=>{
                if (item.selected) {
                    this.selectedIds.push(item.id1);
                }
            })
        },
        handelExpert(index, item){
            this.expertIds = [];
            item.selected = !item.selected;
            this.expertList.map(item=>{
                if (item.selected) {
                    this.expertIds.push(item.id);
                }
            })
        },
        handleOk(){
            let data = {
                fzid: this.fzid,
                ids: this.expertIds.join(',')
            }
            if (this.expertIds.length) {
                this.$emit("addExpert", data)
            } else {
                this.$message.warning("请选择要添加的专家");
            }
            
        },
        // handleCancel(){
        //     this.expertIds = [];
        //     this.selectExpertList = [];
        //     this.expertList = [];
        // },
        selectedExpertList(){
            this.selectedSpinning = true;
            let data = {
                csfzid: this.fzid
            }
            let that = this;
            let httpurl = "/cxj/cxjWysdFzZj/cxjwysd_fzzjlist_yx"
            getAction(httpurl,data).then((res)=>{
                console.log('已选专家',res)
                if(res.success){
                    this.selectedSpinning = false;
                    res.result.map(item=>{
                        item.selected = false;
                    })
                    this.selectExpertList = res.result;
                    // console.log('已选专家列表', this.selectExpertList)
                }
            }).finally(() => {
                that.confirmLoading = false;
            })
        },
        waitExpertList(){
            this.spinning = true;
            this.queryParam.csfzid = this.fzid;
            let that = this;
            let httpurl = "/cxj/cxjWysdFzZj/cxjwysd_fzzjlist_dx"
            that.waitLoading = true;
            console.log('获取参数',that.queryParam)
            getAction(httpurl,that.queryParam).then((res)=>{
                console.log('待选专家',res)
                if(res.success){
                    this.spinning = false;
                    res.result.map(item=>{
                        item.selected = false;
                    })
                    this.expertList = res.result;
                    // console.log('待选专家列表', this.expertList)
                }
            }).finally(() => {
                that.confirmLoading = false;
            })
        },
    }
}
</script>

<style scoped lang='less'>
.expertBox {
		h2 {
			font-size: 16px;
			font-family: PingFangSCRegular;
            color: #3388EE;
            margin-bottom: 0;
			// line-height: 22px;
		}
		.selectExpertBox {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 25px;
			border-bottom: 1px solid #ECEBEB;
			box-sizing: border-box;
			li {
				cursor: pointer;
				margin-right: 15px;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;
                background:rgba(51,136,238,0.1) none repeat scroll !important;
				border-radius: 4px;
				border: 1px solid #3388EE;
				min-width: 80px;
				margin-bottom: 12px;
				span {
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
                }
                &.selectedExpertActive {
                    background:rgba(51,136,238,1) none repeat scroll !important;
                    span {
                        color: #fff;
                    }
                }
			}
		}
		.expertList {
			ol {
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				li {
					cursor: pointer;
					width: 120px;
					display: flex;
					flex-direction: column;
					height: 90px;
                    border-radius: 4px;
                    overflow: hidden;
					border: 1px solid #3388EE;
					margin-right: 11px;
					margin-bottom: 12px;
					span {
						width: 100%;
						display: block;
						height: 36px;
						// background: #3388EE;
                        // opacity: 0.1;
                        background:rgba(51,136,238,0.1) none repeat scroll !important;
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
                    }
                    p {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin: 0;
                        b {
                            width: 100%;
                            display: block;
                            // height: 54px;
                            background: #fff;
                            font-size: 10px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            line-height: 24px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
					
					&.expertActive {
						span {
							background:rgba(51,136,238,1) none repeat scroll !important;
							color: #fff;

						}
						b {
							color: #3388EE;
						}
					}
				}
			}
		}
	}
</style>